<template>
	<view class="container">
		<!-- 显示刷新记录 -->
		<view class="refresh-log">{{ text }}</view>
		<!-- 手动触发刷新的按钮 -->
		<button class="refresh-btn" type="primary" @click="refresh">刷新数据</button>
	</view>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      extraLine: [], 
      text: '刷新'
    };
  },
  methods: {
    refresh() {
      uni.startPullDownRefresh({
        success: function() {
          console.log('startPullDownRefresh()=>success');
        },
        fail: function() {
          console.log('startPullDownRefresh()=>fail');
        },
        complete: function() {
          console.log('startPullDownRefresh()=>complete');
        }
      });
    }
  },
  
  onPullDownRefresh() {
    console.log('onPullDownRefresh()=>触发');
    this.extraLine.push('刷新完成' + this.count);
    setTimeout(() => {
      console.log('onPullDownRefresh()=>刷新完成');
      this.text = this.extraLine.join('\n');
      this.count += 1;
      uni.stopPullDownRefresh();
    }, 2000);
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.refresh-log {
  background-color: #d4f1d4;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  min-height: 200rpx;
  white-space: pre-line; 
}

.refresh-btn {
  width: 100%;
}
</style>